<template>
    <div>
        <el-row>
            <el-col :span="24" class="check_bill_int">
                <!-- 输入就筛选 @input="intContent()" -->
                <el-input placeholder="企业名称/联系人/联系方式/关联中介/邀请人" v-model="form.key" clearable @clear="inputChoose()"></el-input>
                <el-button type="primary" size="small" @click="inputChoose()">搜索</el-button>
            </el-col>
            <el-col :span="24">
                <FiltrateTemplate
                        :templateSource="this.filterSource"
                        @changeChannelAgentFun="changeChannelAgentFun"
                        @changeMemberTypeIdFun="changeMemberTypeIdFun"
                        @changeRegisterStageFun="changeRegisterStageFun"
                        @changeIsXingyeAccountFun="changeIsXingyeAccountFun"
                        @changeCheckStatusFun="changeCheckStatusFun"
                        @changeUserIdFun="changeUserIdFun"
                        @changecheckMinuteFun="changecheckMinuteFun"
                        @changeCheckMinutesComfirmFun="changeCheckMinutesComfirmFun"
                        @changeCheckMinutesClearFun="changeCheckMinutesClearFun"
                        @changeCreateMinuteFun="changeCreateMinuteFun"
                        @changeCreateMinutesComfirmFun="changeCreateMinutesComfirmFun"
                        @changeCreateMinutesClearFun="changeCreateMinutesClearFun"
                        @changeCheckMemberTimesFun="changeCheckMemberTimesFun"
                        @changeCheckMemberTimesComfirmFun="changeCheckMemberTimesComfirmFun"
                        @changeCheckMemberTimesClearFun="changeCheckMemberTimesClearFun"
                        @closeTagFun="closeTagFun"
                        @clearAllChooseFun="clearAllChooseFun">
                </FiltrateTemplate>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="创建时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.createTimeY}}</span><br/><span>{{scope.row.createTimeH}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="inviterName" label="邀请人"> </el-table-column>
            <el-table-column prop="enterpriseName" label="企业名称"> </el-table-column>
            <el-table-column prop="customerName" label="联系人"> </el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式"> </el-table-column>
            <el-table-column prop="enterpriseId" label="ID"> </el-table-column>
            <el-table-column label="账号" v-if="form.registerStage == '5'">
                <template slot-scope="scope">
                    <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover">
                        <div v-for="item in scope.row.bankAccountList">
                            <span>{{item.accountNumber}}</span>
                        </div>
                        <span slot="reference" v-if="scope.row.bankAccountList != null">{{scope.row.bankAccountList[0].accountNumber}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="memberTypeName" label="平台"> </el-table-column>
            <el-table-column prop="channelAgent" label="渠道代理"> </el-table-column>
            <el-table-column prop="simpleEnterpriseName" label="关联中介"> </el-table-column>
            <el-table-column prop="registrationPhase" label="注册阶段"> </el-table-column>
            <el-table-column prop="currentStatusName" label="审核状态"> </el-table-column>
            <el-table-column prop="checkedTime" label="审核时间" width="124"> </el-table-column>
            <el-table-column prop="checkerName" label="审核人"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="memberDetail(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <MemberDetail ref="memberdetail"></MemberDetail>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import FiltrateTemplate from '@common/FiltrateTemplate.vue';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    import { memberStatusName } from '@/util/format'
    import MemberDetail from '@component/manage/member/Detail.vue';
    import moment from 'moment';
    var memberStore = namespace('member')
    @Component({
        extends: Pagination,
        components: {
            FiltrateTemplate,
            MemberDetail
        }
    })
    export default class MemberQuery extends Vue {
        @memberStore.Action('loadPlatformDetail') loadPlatformDetail!:Function;
        tableData = []
        filterSource: string = 'memberQuery';
        // queryMemberState: string = '';
        isCreateClick: boolean = true;
        isCheckClick: boolean = true;
        memberStatus = {
            platform: 0,
            fumin: 0
        };
        get memberState() {
            return Number(this.memberStatus.platform)
        }
        form = {
            channelAgent: '',
            memberTypeId: '1',
            registerStage: '5',
            isXingyeAccount: '',
            checkStatus: '',
            userId: '',
            key: ''
        }
        filterCondition = {
            checkMinutes: {
                min: '',
                max: ''
            },
            createMinutes: {
                min: '',
                max: ''
            },
            checkMemberTimes: {
                min: '',
                max: ''
            }
        }
        async getMemberQueryList () {
            let sendCreateMin = ''
            let sendCreateMax = ''
            let sendCheckMin = ''
            let sendCheckMax = ''
            if (this.isCreateClick) {
                sendCreateMin = this.filterCondition.createMinutes.min;
                sendCreateMax = this.filterCondition.createMinutes.max;
            } else {
                sendCreateMin = '-'+(Number(this.filterCondition.createMinutes.max) - 1);
                sendCreateMax = '1';
            }
            if (this.isCheckClick) {
                sendCheckMin = this.filterCondition.checkMemberTimes.min;
                sendCheckMax = this.filterCondition.checkMemberTimes.max;
            } else {
                sendCheckMin = '-' + (Number(this.filterCondition.checkMemberTimes.max) - 1);
                sendCheckMax = '1';
            }
            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                channelAgent: this.form.channelAgent,
                memberType: this.form.memberTypeId,
                registerStage: this.form.registerStage,
                checkStatus: this.form.checkStatus,
                userId: this.form.userId,
                isXingyeAccount: this.form.isXingyeAccount,
                checkMinutesMin: this.filterCondition.checkMinutes.min,
                checkMinutesMax: this.filterCondition.checkMinutes.max,
                createTimeMin: sendCreateMin,
                createTimeMax: sendCreateMax,
                checkTimeMin: sendCheckMin,
                checkTimeMax: sendCheckMax,
                key: this.form.key
            }
            let res = await this.$http.post('queryMemberList/memberList', params)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                items.forEach((i) => {
                    if (i.memberType == 1) {
                        i.memberTypeName = '平台';
                    } else {
                        i.memberTypeName = '富民';
                    }
                    i.currentStatusName = memberStatusName(i.currentStatus)
                    if (i.createTime == '--' || i.createTime == null || i.createTime == undefined) {
                        i.createTimeY = '--'
                    }  else {
                        i.createTimeY = moment(i.createTime).format('YYYY-MM-DD')
                        i.createTimeH = moment(i.createTime).format('HH:mm:ss')
                    }
                })
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }

        memberDetail (row: any) {
            const self = this;
            const memberState = this.getCurrentRowStatus(row);
            this.loadPlatformDetail({
                customerId: row.customerId,
                enterpriseId: row.enterpriseId,
                inviterName: row.inviterName,
                agentTreasurerId: row.agentTreasurerId,
                bankAccountId: row.bankAccountId,
                number: memberState
            }).then((res)=>{
                if (!res.data) {
                    self.$notify({
                        title: '消息',
                        message: '数据为空',
                    });
                    return
                }
                self.$refs.memberdetail.open(memberState);
            })
        }
        getCurrentRowStatus({ currentStatus }:any) {
            // var status = 4
            // return status;
            var status = 0
            if (this.memberState === 0) {
                if(currentStatus > 10 && currentStatus < 20) {
                    status = 1;
                }
                if(currentStatus > 20 && currentStatus < 30) {
                    status = 2;
                }
                if(currentStatus > 30 && currentStatus < 40) {
                    status = 3;
                }
                if(currentStatus > 40) {
                    status = 4;
                }
            }
            return status > 0 ? status : this.memberState;
        }

        filterFunction (filterForm: any) {
            this.pagination.currentPage = 1
            this.form = filterForm.filterModel;
            this.filterCondition = filterForm.filterCondition;
            this.getMemberQueryList();
        }
        // 渠道代理
        changeChannelAgentFun (data) {
            this.filterFunction(data)
        }
        // 承兑机构
        // changeAcceptFun (data) {
        //     this.filterFunction(data)
        // }
        // 会员类型
        changeMemberTypeIdFun (data) {
            this.filterFunction(data)
        }
        // 注册阶段
        changeRegisterStageFun (data) {
            this.filterFunction(data)
        }
        // 账户类型
        changeIsXingyeAccountFun (data) {
            this.filterFunction(data)
        }
        // 审核状态
        changeCheckStatusFun (data) {
            this.filterFunction(data)
        }
        // 审核客服
        changeUserIdFun (data) {
            this.filterFunction(data)
        }
        // 审核时长 -- 切换
        changecheckMinuteFun (data) {
            this.filterFunction(data)
        }
        // 审核时长 -- 输入
        changeCheckMinutesComfirmFun (data) {
            this.filterFunction(data)
        }
        // 审核时长 -- 输入（清空）
        changeCheckMinutesClearFun (data) {
            this.filterFunction(data)
        }
        // 创建时间 -- 切换
        changeCreateMinuteFun (data) {
            this.isCreateClick = true;
            this.filterFunction(data)
        }
        // 创建时间 -- 输入
        changeCreateMinutesComfirmFun (data) {
            this.isCreateClick = false;
            this.filterFunction(data)
        }
        // 创建时间 -- 输入（清空）
        changeCreateMinutesClearFun (data) {
            this.isCreateClick = true;
            this.filterFunction(data)
        }
        // 会员查询 审核时间 -- 切换
        changeCheckMemberTimesFun (data) {
            this.isCheckClick = true;
            this.filterFunction(data)
        }
        // 会员查询 审核时间 -- 输入
        changeCheckMemberTimesComfirmFun (data) {
            this.isCheckClick = false;
            this.filterFunction(data)
        }
        // 会员查询 审核时间 -- 输入（清空）
        changeCheckMemberTimesClearFun (data) {
            this.isCheckClick = true;
            this.filterFunction(data)
        }
        closeTagFun (data) {
            this.filterFunction(data)
        }
        clearAllChooseFun (data) {
            this.filterFunction(data)
        }

        // 表单输入点击筛选
        inputChoose () {
            this.getMemberQueryList()
        }

        loadDataForPagination() {
            this.getMemberQueryList()
        }

        mounted () {
            this.getMemberQueryList()
        }
    }
</script>

<style lang="scss">

</style>